<template>
  <div class="general-situation-view">
    <!-- 页面头部 -->
    <div class="page-header">
      <h1 class="page-title">
        <span class="icon">📊</span>
        区域慢病管理概览
      </h1>
      <div class="breadcrumb">首页 / 统计分析 / 慢病概况</div>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-container">
      <!-- 数据概览卡片区域 -->
      <div class="stats-overview">
        <!-- 总患者数 -->
        <div class="stat-card">
          <div class="stat-icon">
            <i class="el-icon-user-solid"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ patientTotal }}</div>
            <div class="stat-label">患者总数</div>
          </div>
          <div class="stat-trend">
            <span class="trend-up">+5.2%</span>
          </div>
        </div>

        <!-- 高血压患者 -->
        <div class="stat-card">
          <div class="stat-icon heart">
            <i class="el-icon-heart"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ hypertensionCount }}</div>
            <div class="stat-label">高血压患者数</div>
          </div>
          <div class="stat-trend">
            <span class="trend-up">+3.1%</span>
          </div>
        </div>

        <!-- 糖尿病患者 -->
        <div class="stat-card">
          <div class="stat-icon blood">
            <i class="el-icon-warning"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ diabetesCount }}</div>
            <div class="stat-label">糖尿病患者数</div>
          </div>
          <div class="stat-trend">
            <span class="trend-up">+4.3%</span>
          </div>
        </div>

        <!-- 高血脂患者 -->
        <div class="stat-card">
          <div class="stat-icon lipid">
            <i class="el-icon-document"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ hyperlipidemiaCount }}</div>
            <div class="stat-label">高血脂患者数</div>
          </div>
          <div class="stat-trend">
            <span class="trend-up">+2.8%</span>
          </div>
        </div>

        <!-- 脑卒中患者 -->
        <div class="stat-card">
          <div class="stat-icon stroke">
            <i class="el-icon-medal"></i>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ strokeCount }}</div>
            <div class="stat-label">脑卒中患者数</div>
          </div>
          <div class="stat-trend">
            <span class="trend-down">-1.2%</span>
          </div>
        </div>
      </div>

      <!-- 数据图表区域 -->
      <div class="charts-container">
        <!-- 新增患者趋势图 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3 class="chart-title">新增慢病患者数</h3>
            <div class="chart-controls">
              <el-radio-group v-model="timeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
              </el-radio-group>
              <el-select v-model="selectedYear" size="small" class="year-select">
                <el-option v-for="year in years" :key="year" :label="year" :value="year"></el-option>
              </el-select>
            </div>
          </div>
          <div class="chart-content">
            <div id="newPatientChart" ref="newPatientChart" class="chart"></div>
          </div>
        </div>

        <!-- 指标异常情况 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3 class="chart-title">指标检测异常情况</h3>
            <div class="chart-controls">
              <el-radio-group v-model="abnormalTimeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="progress">进度</el-radio-button>
              </el-radio-group>
              <el-select v-model="abnormalYear" size="small" class="year-select">
                <el-option v-for="year in years" :key="year" :label="year" :value="year"></el-option>
              </el-select>
            </div>
          </div>
          <div class="chart-content">
            <div id="abnormalIndicatorsChart" ref="abnormalIndicatorsChart" class="chart"></div>
          </div>
        </div>

        <!-- 慢病患者分布 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3 class="chart-title">慢病患者分布</h3>
          </div>
          <div class="chart-content">
            <div id="diseaseDistributionChart" ref="diseaseDistributionChart" class="chart"></div>
          </div>
        </div>

        <!-- 慢病患者年龄分布 -->
        <div class="chart-card">
          <div class="chart-header">
            <h3 class="chart-title">慢病患者年龄分布</h3>
          </div>
          <div class="chart-content">
            <div id="ageDistributionChart" ref="ageDistributionChart" class="chart"></div>
          </div>
        </div>
      </div>

      <!-- 区域分布热力图 -->
      <div class="section-card">
        <div class="section-header">
          <div class="section-icon">🗺️</div>
          <h3 class="section-title">区域慢病患者分布热力图</h3>
        </div>
        <div class="map-container">
          <div id="regionMap" ref="regionMap" class="map"></div>
          <div class="map-legend">
            <div class="legend-title">患者密度</div>
            <div class="legend-items">
              <div class="legend-item">
                <div class="legend-color" style="background-color: #e0f2fe;"></div>
                <span>低</span>
              </div>
              <div class="legend-item">
                <div class="legend-color" style="background-color: #93c5fd;"></div>
                <span></span>
              </div>
              <div class="legend-item">
                <div class="legend-color" style="background-color: #3b82f6;"></div>
                <span></span>
              </div>
              <div class="legend-item">
                <div class="legend-color" style="background-color: #1d4ed8;"></div>
                <span></span>
              </div>
              <div class="legend-item">
                <div class="legend-color" style="background-color: #1e3a8a;"></div>
                <span>高</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 重点关注患者 -->
      <div class="section-card">
        <div class="section-header">
          <div class="section-icon">⚠️</div>
          <h3 class="section-title">重点关注患者名单</h3>
        </div>
        <div class="patient-table-container">
          <el-table :data="focusPatients" style="width: 100%" stripe>
            <el-table-column prop="id" label="患者ID" width="100"></el-table-column>
            <el-table-column prop="name" label="姓名" width="100">
              <template #default="scope">
                <div class="patient-name">{{ scope.row.name }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="80"></el-table-column>
            <el-table-column prop="gender" label="性别" width="80">
              <template #default="scope">
                <el-tag :type="scope.row.gender === '男' ? 'primary' : 'danger'">
                  {{ scope.row.gender }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="disease" label="主要疾病" width="120">
              <template #default="scope">
                <div class="disease-tags">
                  <el-tag v-for="(item, index) in scope.row.disease" :key="index" :type="getDiseaseType(item)">
                    {{ item }}
                  </el-tag>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="riskLevel" label="风险等级" width="100">
              <template #default="scope">
                <el-tag :type="getRiskLevelType(scope.row.riskLevel)">
                  {{ scope.row.riskLevel }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="lastVisit" label="最近随访日期"></el-table-column>
            <el-table-column prop="nextVisit" label="下次随访日期"></el-table-column>
            <el-table-column label="操作" width="120" fixed="right">
              <template #default="scope">
                <el-button size="small" type="primary" @click="viewPatientDetail(scope.row)">
                  查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>

      <!-- 月度统计报告 -->
      <div class="section-card">
        <div class="section-header">
          <div class="section-icon">📋</div>
          <h3 class="section-title">月度慢病管理统计报告</h3>
        </div>
        <div class="report-cards">
          <div class="report-card">
            <div class="report-icon">💉</div>
            <div class="report-content">
              <div class="report-title">规范管理率</div>
              <div class="report-value">78.5%</div>
              <div class="report-desc">较上月提高2.3%</div>
            </div>
          </div>
          
          <div class="report-card">
            <div class="report-icon">📈</div>
            <div class="report-content">
              <div class="report-title">控制达标率</div>
              <div class="report-value">65.2%</div>
              <div class="report-desc">较上月提高1.8%</div>
            </div>
          </div>
          
          <div class="report-card">
            <div class="report-icon">🔄</div>
            <div class="report-content">
              <div class="report-title">随访完成率</div>
              <div class="report-value">92.8%</div>
              <div class="report-desc">较上月提高0.5%</div>
            </div>
          </div>
          
          <div class="report-card">
            <div class="report-icon">🏥</div>
            <div class="report-content">
              <div class="report-title">转诊率</div>
              <div class="report-value">3.2%</div>
              <div class="report-desc">较上月下降0.3%</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部信息 -->
    <div class="footer-section">
      <div class="footer-content">
        <div class="footer-logo">
          <i class="el-icon-medal"></i>
          <span>区域慢病管理系统 - 数据概览</span>
        </div>
        <div class="footer-info">
          <p>数据更新时间：{{ lastUpdateTime }}</p>
          <p>© 2024 区域慢病管理系统 版权所有</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick, watch } from 'vue'
import { ElMessage } from 'element-plus'
// import * as echarts from 'echarts'

// 统计数据
const patientTotal = ref(2231)
const hypertensionCount = ref(1632)
const diabetesCount = ref(1632)
const hyperlipidemiaCount = ref(1632)
const strokeCount = ref(1632)

// 时间选择
const timeRange = ref('week')
const selectedYear = ref('2022')
const abnormalTimeRange = ref('week')
const abnormalYear = ref('2022')
const years = ['2020', '2021', '2022', '2023', '2024']

// 图表引用
const newPatientChart = ref(null)
const abnormalIndicatorsChart = ref(null)
const diseaseDistributionChart = ref(null)
const ageDistributionChart = ref(null)
const regionMap = ref(null)

// 最近更新时间
const lastUpdateTime = ref('')

// 重点关注患者数据
const focusPatients = ref([
  { id: 'P2024001', name: '张**', age: 65, gender: '男', disease: ['高血压', '糖尿病'], riskLevel: '高风险', lastVisit: '2024-05-15', nextVisit: '2024-05-29' },
  { id: 'P2024002', name: '李**', age: 72, gender: '男', disease: ['高血压', '高血脂'], riskLevel: '高风险', lastVisit: '2024-05-18', nextVisit: '2024-06-01' },
  { id: 'P2024003', name: '王**', age: 58, gender: '女', disease: ['糖尿病', '脑卒中'], riskLevel: '极高风险', lastVisit: '2024-05-10', nextVisit: '2024-05-24' },
  { id: 'P2024004', name: '赵**', age: 68, gender: '男', disease: ['高血压', '脑卒中'], riskLevel: '高风险', lastVisit: '2024-05-12', nextVisit: '2024-05-26' },
  { id: 'P2024005', name: '陈**', age: 61, gender: '女', disease: ['糖尿病', '高血脂'], riskLevel: '中风险', lastVisit: '2024-05-20', nextVisit: '2024-06-03' },
])

// 获取疾病标签类型
const getDiseaseType = (disease) => {
  const typeMap = {
    '高血压': 'danger',
    '糖尿病': 'warning',
    '高血脂': 'primary',
    '脑卒中': 'info'
  }
  return typeMap[disease] || 'success'
}


// 获取风险等级标签类型
const getRiskLevelType = (level) => {
  const typeMap = {
    '低风险': 'success',
    '中风险': 'warning',
    '高风险': 'danger',
    '极高风险': 'info'
  }
  return typeMap[level] || 'primary'
}

// 查看患者详情
const viewPatientDetail = (patient) => {
  ElMessage.info(`查看患者 ${patient.name} 的详细信息`)
  // 这里可以添加跳转到患者详情页面的逻辑
}

// 初始化新增患者趋势图
const initNewPatientChart = () => {
  const chart = echarts.init(newPatientChart.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['10-23', '10-24', '10-25', '10-26', '10-27', '10-28', '10-29'],
        axisLabel: {
          color: '#64748b'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        axisLabel: {
          color: '#64748b'
        }
      }
    ],
    series: [
      {
        name: '新增患者',
        type: 'line',
        stack: '总量',
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(1, 51, 122, 0.5)' },
            { offset: 1, color: 'rgba(1, 51, 122, 0.1)' }
          ])
        },
        emphasis: {
          focus: 'series'
        },
        lineStyle: {
          color: '#01337A',
          width: 3
        },
        itemStyle: {
          color: '#01337A'
        },
        data: [30, 42, 57, 28, 15, 20, 25]
      }
    ]
  }
  chart.setOption(option)
}

// 初始化异常指标图表
const initAbnormalIndicatorsChart = () => {
  const chart = echarts.init(abnormalIndicatorsChart.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      },
      formatter: function(params) {
        return params[0].name + '<br/>' + params[0].value + '/3465人';
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      show: false
    },
    yAxis: {
      type: 'category',
      data: ['血压异常', '血糖异常', '血脂异常', '体质指数异常', '尿酸异常'],
      axisLabel: {
        color: '#64748b'
      }
    },
    series: [
      {
        name: '异常人数',
        type: 'bar',
        data: [213, 213, 189, 245, 213],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
            { offset: 0, color: '#01337A' },
            { offset: 1, color: '#156296' }
          ])
        },
        barWidth: '60%',
        label: {
          show: true,
          position: 'right',
          formatter: '{c}/3465',
          color: '#334155'
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化疾病分布图表
const initDiseaseDistributionChart = () => {
  const chart = echarts.init(diseaseDistributionChart.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['高血压', '糖尿病', '高血脂', '肥胖症', '高尿酸'],
      axisLabel: {
        color: '#64748b',
        interval: 0,
        rotate: 30
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#64748b'
      }
    },
    series: [
      {
        name: '患者人数',
        type: 'bar',
        data: [864, 856, 844, 804, 732],
        itemStyle: {
          color: function(params) {
            const colorList = ['#ef4444', '#f59e0b', '#8b5cf6', '#3b82f6', '#f97316']
            return colorList[params.dataIndex]
          }
        },
        barWidth: '60%'
      }
    ]
  }
  chart.setOption(option)
}

// 初始化年龄分布图表
const initAgeDistributionChart = () => {
  const chart = echarts.init(ageDistributionChart.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['男性', '女性'],
      bottom: '0%'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['35岁以下', '35-40岁', '40-45岁', '45-50岁', '50-55岁', '55-60岁', '60岁以上'],
      axisLabel: {
        color: '#64748b',
        interval: 0,
        rotate: 30
      }
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        color: '#64748b'
      }
    },
    series: [
      {
        name: '男性',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: [45, 48, 52, 120, 150, 250, 180],
        itemStyle: {
          color: '#3b82f6'
        }
      },
      {
        name: '女性',
        type: 'bar',
        stack: 'total',
        emphasis: {
          focus: 'series'
        },
        data: [55, 52, 48, 80, 150, 200, 320],
        itemStyle: {
          color: '#10b981'
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化区域地图（简化版）
const initRegionMap = () => {
  const chart = echarts.init(regionMap.value)
  // 模拟区域数据
  const regionData = [
    { name: '区域A', value: 350 },
    { name: '区域B', value: 280 },
    { name: '区域C', value: 450 },
    { name: '区域D', value: 220 },
    { name: '区域E', value: 180 },
    { name: '区域F', value: 380 },
    { name: '区域G', value: 250 },
    { name: '区域H', value: 320 }
  ]
  
  // 使用散点图模拟热力图效果
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}人'
    },
    visualMap: {
      show: false,
      min: 0,
      max: 500,
      inRange: {
        color: ['#e0f2fe', '#93c5fd', '#3b82f6', '#1d4ed8', '#1e3a8a']
      }
    },
    series: [
      {
        name: '患者分布',
        type: 'scatter',
        data: [
          [100, 100, 350], [200, 120, 280], [150, 180, 450], [300, 150, 220],
          [250, 220, 180], [180, 250, 380], [350, 200, 250], [280, 280, 320]
        ],
        symbolSize: function(val) {
          return Math.sqrt(val[2]) * 2
        },
        itemStyle: {
          color: function(params) {
            const value = params.value[2]
            if (value < 200) return '#e0f2fe'
            else if (value < 280) return '#93c5fd'
            else if (value < 350) return '#3b82f6'
            else if (value < 420) return '#1d4ed8'
            else return '#1e3a8a'
          }
        },
        label: {
          show: true,
          formatter: function(params) {
            const index = Math.floor(params.dataIndex / 1)
            return regionData[index].name
          },
          position: 'top'
        }
      }
    ]
  }
  chart.setOption(option)
}

// 初始化所有图表
const initCharts = async () => {
  await nextTick()
  initNewPatientChart()
  initAbnormalIndicatorsChart()
  initDiseaseDistributionChart()
  initAgeDistributionChart()
  initRegionMap()
  
  // 监听窗口大小变化，调整图表大小
  window.addEventListener('resize', () => {
    newPatientChart.value && echarts.getInstanceByDom(newPatientChart.value)?.resize()
    abnormalIndicatorsChart.value && echarts.getInstanceByDom(abnormalIndicatorsChart.value)?.resize()
    diseaseDistributionChart.value && echarts.getInstanceByDom(diseaseDistributionChart.value)?.resize()
    ageDistributionChart.value && echarts.getInstanceByDom(ageDistributionChart.value)?.resize()
    regionMap.value && echarts.getInstanceByDom(regionMap.value)?.resize()
  })
}

// 监听时间范围变化
watch([timeRange, selectedYear, abnormalTimeRange, abnormalYear], () => {
  // 这里可以根据选择的时间范围重新加载数据并更新图表
  ElMessage.info('时间范围已更新')
})

// 页面加载时的处理
onMounted(() => {
  // 设置最后更新时间
  const now = new Date()
  lastUpdateTime.value = now.toLocaleString('zh-CN')
  
  // 初始化图表
  initCharts()
  
  // 显示页面加载提示
  ElMessage.info('区域慢病管理概览数据已加载')
})
</script>

<style scoped>
/* 全局样式 */
.general-situation-view {
  padding: 20px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  min-height: 100vh;
  font-family: 'Microsoft YaHei', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 页面标题区域 */
.page-header {
  margin-bottom: 32px;
  padding: 24px 32px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
}

.page-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px 0;
  font-size: 32px;
  font-weight: 700;
  color: #01337A;
}

.page-title .icon {
  font-size: 36px;
}

.breadcrumb {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

/* 内容容器 */
.content-container {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* 统计卡片样式 */
.stats-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(31, 38, 135, 0.15);
}

.stat-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #01337A, #156296);
  border-radius: 12px;
  color: white;
  font-size: 24px;
}

.stat-icon.heart {
  background: linear-gradient(135deg, #ef4444, #dc2626);
}

.stat-icon.blood {
  background: linear-gradient(135deg, #f59e0b, #d97706);
}

.stat-icon.lipid {
  background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.stat-icon.stroke {
  background: linear-gradient(135deg, #10b981, #059669);
}

.stat-content {
  flex: 1;
}

.stat-value {
  font-size: 32px;
  font-weight: 700;
  color: #01337A;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #64748b;
}

.stat-trend {
  font-size: 14px;
  font-weight: 600;
}

.trend-up {
  color: #01A63E;
}

.trend-down {
  color: #ef4444;
}

/* 图表容器样式 */
.charts-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
  gap: 24px;
}

.chart-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e2e8f0;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: #01337A;
  margin: 0;
}

.chart-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}

.year-select {
  width: 120px;
}

.chart-content {
  height: 300px;
}

.chart {
  width: 100%;
  height: 100%;
}

/* 区域样式 */
.section-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(31, 38, 135, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid #e2e8f0;
}

.section-icon {
  font-size: 24px;
}

.section-title {
  font-size: 24px;
  font-weight: 600;
  color: #01337A;
  margin: 0;
}

/* 地图容器 */
.map-container {
  position: relative;
  height: 400px;
  display: flex;
  gap: 20px;
}

.map {
  flex: 1;
  border-radius: 12px;
  background: #f8fafc;
}

.map-legend {
  width: 120px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
  align-self: flex-end;
}

.legend-title {
  font-weight: 600;
  color: #01337A;
  text-align: center;
  margin-bottom: 8px;
}

.legend-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend-color {
  width: 20px;
  height: 12px;
  border-radius: 2px;
}

/* 患者表格 */
.patient-table-container {
  overflow-x: auto;
}

.patient-name {
  font-weight: 500;
  color: #01337A;
}

.disease-tags {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

/* 报告卡片 */
.report-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.report-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #e2e8f0;
}

.report-icon {
  font-size: 36px;
}

.report-content {
  flex: 1;
}

.report-title {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 4px;
}

.report-value {
  font-size: 24px;
  font-weight: 700;
  color: #01337A;
  margin-bottom: 4px;
}

.report-desc {
  font-size: 12px;
  color: #01A63E;
}

/* 底部样式 */
.footer-section {
  margin-top: 64px;
  padding: 32px;
  background: linear-gradient(135deg, #01337A, #156296);
  border-radius: 16px;
  color: white;
}

.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}

.footer-logo i {
  font-size: 32px;
}

.footer-info p {
  margin: 4px 0;
  font-size: 14px;
  opacity: 0.9;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .charts-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .general-situation-view {
    padding: 16px;
  }
  
  .page-header {
    padding: 20px 24px;
    margin-bottom: 24px;
  }
  
  .page-title {
    font-size: 28px;
  }
  
  .stats-overview {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
  }
  
  .stat-card {
    padding: 20px;
  }
  
  .stat-icon {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  
  .stat-value {
    font-size: 24px;
  }
  
  .chart-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  
  .chart-controls {
    width: 100%;
    justify-content: space-between;
  }
  
  .map-container {
    flex-direction: column;
    height: 500px;
  }
  
  .map-legend {
    width: 100%;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    order: -1;
  }
  
  .legend-items {
    flex-direction: row;
    align-items: center;
  }
  
  .report-cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
  
  .footer-section {
    padding: 24px;
  }
}

@media (max-width: 480px) {
  .stats-overview {
    grid-template-columns: 1fr 1fr;
  }
  
  .stat-card {
    flex-direction: column;
    text-align: center;
    padding: 16px;
  }
  
  .chart-content {
    height: 250px;
  }
  
  .report-cards {
    grid-template-columns: 1fr;
  }
}
</style>